{% extends 'base-static.html' %}
{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/modules/layer/skin/layer.css' %}">
{% endblock %}

{% block content %}
    <section class="content-header">
        <h1>
            用户列表
        </h1>
        <ol class="breadcrumb">
            <li><a href="{% url 'backend:statistic' %}"><i class="fa fa-dashboard"></i>统计</a></li>
            <li class="active">用户列表</li>
        </ol>
    </section>

    <section class="content">
        <div id="devlist">
            <div class="box box-primary" id="liebiao">
                <div class="box-header">
                    <div class="btn-group pull-left">
                        <button type="button" id="btnRefresh" class="btn btn-default">
                            <i class="glyphicon glyphicon-repeat"></i>刷新
                        </button>
                    </div>

                </div>
                <div class="box-body">
                    <div class="btn-group pull-right">
                        <form class="form-inline" onsubmit="return false;">
                            <div class="form-group">
                                <label>搜索：</label>
                                <input placeholder="请输入用户名" id="searchTitle" class="form-control" type="text"/>
                                <button class="btn btn-default" id="Search">搜索</button>
                            </div>
                        </form>
                    </div>

                    <table id="dtbList" class="display" cellspacing="0" width="100%">
                        <thead>
                        <tr valign="middle">
                            <th><input type="checkbox" id="checkAll"></th>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>账户</th>
                            <th>邮箱</th>
                            <th>注册时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <br> <br>
                </div>
            </div>
        </div>
    </section>


{% endblock %}


{% block js %}
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.const.js' %}"></script>
    <script src="{% static 'plugins/layui/layui.js' %}"></script>
    <script src="{% static 'plugins/layui/css/modules/layer/layer.js' %}"></script>
    <script>
        var oDataTable = null;
        $(function () {
            oDataTable = initTable();

            function initTable() {
                var oTable = $('#dtbList').DataTable($.extend(true, {},
                    DATATABLES_CONSTANT.DATA_TABLES.DEFAULT_OPTION,
                    {
                        ajax: {
                            "url": "{% url 'backend:user-list' %}",
                            // 过滤
                            "data": function (d) {
                                d.name = $('#searchTitle').val().trim();
                            }
                        },
                        columns: [
                            DATATABLES_CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,
                            {
                                data: "id",
                                width: "5%",
                            },
                            {
                                data: "username",
                                width: "20%",
                            },
                            {
                                data: "mobile",
                                width: "20%",
                            },
                            {
                                data: "email",
                                width: "20%",
                            },
                            {
                                data: "date_joined",
                                width: "20%",
                            },

                            {
                                data: "id",
                                width: "12%",
                                bSortable: "false",
                                render: function (data, type, row, meta) {
                                    var ret = "";
                                    ret = ret + "<button name='doDeViceList' title='设备列表' class='btn btn-sm btn-primary' onclick='doDeViceList("
                                        + data + ")'>设备列表</button>";
                                    return ret;
                                }
                            }],
                        "order": [
                            [2, 'desc']
                        ],
                    }));
                return oTable;
            }

            // 搜索
            $('#Search').click(function () {
                oDataTable.ajax.reload();
            });
        });


        // 刷新
        $('#btnRefresh').click(function () {
            window.location.reload();
        });

        // 跳转到设备列表
        function doDeViceList(d) {
            window.location.href = ["{% url 'backend:device' %}" + "?id=" + d];
        }

    </script>

{% endblock %}
